<template>
  <div v-show="records.length>0">
    <gj-loadmore :bottom-method="loadBottom" ref="loadmoreobj">
       <ul class="fund-history-ul">
          <li v-show="records.length>0"  v-for="(item,index) in records">
              <div class="fund-history-row-one">
                 <div :class="getBsClass(item.entrust_bs)">{{getBsType(item.entrust_bs)}}</div>
                 <span class="fund-history-item-name" v-text="item.ofname"></span>
                 <span class="fund-history-item-title" v-text="item.ofcode"></span>
              </div>
              <div  class="fund-history-row-two">
                  <div class="fund-history-item-content">
                      <div v-text="getNumberFormat(item.business_vol)"></div>
                      <div class="fund-history-item-title">委托份额</div>
                  </div>
                  <div class="fund-history-item-content">
                      <div v-text="getNumberFormat(item.business_amt)"></div>
                      <div class="fund-history-item-title">委托金额</div>
                  </div >
                  <div class="fund-history-item-content-time">
                      <div>{{ getDateFormat(item)}}</div>
                      <div class="fund-history-item-title">成交日期</div>
                  </div>
                  <div class="clear"></div>
              </div>
            </li>
        </ul>
    </gj-loadmore>
  </div>
</template>

<script>
  import CommonUtil from 'common/common.util'
  import RemoteDAO from 'common/remoteDAO'
  import LocalDAO from 'common/localDAO'
  import LoadMore from 'components/LoadMore'
 export default {
 	data () {
      return {
        test:"",
        debug:false,
        bstype:"",
        start:0,
        limit:20,
        user_code:LocalDAO.getUserCode(),//"41667",//
        records:[],
        mStartDate:this.startDate,
        mEndDate:this.endDate,
      }
    },
    props:["startDate","endDate"],
    components: {
      'gj-loadmore': LoadMore
    },
    watch:{
       startDate(val){
        this.mStartDate=val;
       },
        endDate(val){
        this.mEndDate=val;
       },
    },
    methods: {
        getNumberFormat(vol){
          return  CommonUtil.toFixed(vol,3);
        },
        getDateFormat(item){
          return   CommonUtil.formatDateSlash(item.business_date)+" "+CommonUtil.formatHourMinute(item.business_time);
        },
        getBsType (type) {
    			const bsTypeMap = {
    				2: "认购",
    				3: "申购",
    				4: "赎回",
    				5: "合并",
    				6: "分拆"
    			};
    			
    			return bsTypeMap[type] || "其它"
    		},
    		getBsClass (type) {
    			const bsClassMap = {
    				2: "icon-rengou",
    				3: "icon-shengou",
    				4: "icon-shuhui",
    				5: "icon-shuhui",
    				6: "icon-shuhui"
    			};
    			
    			return bsClassMap[type] || "icon-shengou"
    		},
         //上拉加载
        loadBottom () {
            this.onSearchHistory();
        },//查询开放式基金历史成交记录.
        onSearchHistory(){
           if(this.mStartDate !=="" || this.mEndDate !== ""){
             const userCode=this.user_code;
             let params={
                 client_id:userCode,
                 entrust_type:1,
                 entrust_typeid:"",
                 start:this.start,
                 limit:this.limit,
                 start_date:this.mStartDate,
                 end_date:this.mEndDate
               };

               RemoteDAO.callJCL11168(params,response=>{
                if(response.error=="0"){
                	let mrecords=response.data.body.records;
                	this.records=[...this.records].concat(mrecords);
                	if(this.records.length === 0){
                    this.closeMore("所选区间无历史成交");
                  }else{
                    if(mrecords.length>0 && mrecords.length == this.limit){
                      this.start += this.limit;
                      this.$refs.loadmoreobj.onBottomLoaded();
                    }else {
                      this.$refs.loadmoreobj.onBottomAllLoaded();
                    }
                  }                	
                }else{
                  this.closeMore(response.data);
                }
              });
          }
        },
        onGetHistory () {
           this.start=0;
           this.records=[];
          this.$refs.loadmoreobj.reset();
        },
        closeMore(msg){
           this.$store.dispatch('setTip',{text:msg});
           this.$refs.loadmoreobj.onBottomError();
        },
    }
  }
</script>


<style scoped>

  .fund-history-ul {
    position: relative;
    list-style-type: none;
    margin:8px 0 0 0;
    padding: 0;
  }

   .fund-history-ul li{
     border-bottom: 1px solid #dedede;
     padding:10px 0 10px 0;
      background: #fff;
   }


   .fund-history-row-one{
    position: relative;
    z-index: 2;
    padding-left: 3%;
    vertical-align: middle;
  }

  .fund-history-row-two{
    position: relative;
    z-index: 1;
    padding-top: 10px;
  }

  .fund-history-item-title{
      color: #9D9E9F;
      padding-top: 2px;
      font-size: 12px;
      vertical-align: middle;
  }

  .fund-history-item-name{
      font-size:16px;
      color:#565656;
      line-height: 16px;
      vertical-align: middle;
  }

  .fund-history-img-ok{
    position: absolute;
    height: 47px;
    width: 62px;
    top:-10px;
    float: right;
    margin-left: 75%;
    background-image: url("~assets/images/yicheng.png");
    background-size: 100%;
    background-repeat: no-repeat;
  }

.fund-history-img-cancel{
    position: absolute;
    height: 47px;
    width: 62px;
    top:-10px;
    float: right;
    margin-left: 75%;
    background-image: url("~assets/images/yichedan.png");
    background-size: 100%;
    background-repeat: no-repeat;
  }

.fund-history-img-yibao{
    position: absolute;
    height: 47px;
    width: 62px;
    top:-10px;
    float: right;
    margin-left: 75%;
    background-image: url("~assets/images/yihui.png");
    background-size: 100%;
    background-repeat: no-repeat;
  }

.fund-history-img-bucheng{
    position: absolute;
    height: 47px;
    width: 62px;
    top:-10px;
    float: right;
    margin-left: 75%;
    background-image: url("~assets/images/order-status3.png");
    background-size: 100%;
    background-repeat: no-repeat;
  }

  .fund-history-img-buche{
    position: absolute;
    height: 47px;
    width: 62px;
    top:-10px;
    float: right;
    margin-left: 75%;
    background-image: url("~assets/images/order-status4.png");
    background-size: 100%;
    background-repeat: no-repeat;
  }

  .fund-history-img-feidan{
    position: absolute;
    height: 47px;
    width: 62px;
    top:-10px;
    float: right;
    margin-left: 75%;
    background-image: url("~assets/images/feidan.png");
    background-size: 100%;
    background-repeat: no-repeat;
  }

  .fund-history-item-content{
    float: left;
    width: 28%;
    text-align: center;
    font-size: 16px;
  }

  .fund-history-item-content-time{
    float: left;
    width: 44%;
    overflow: hidden;
    white-space: nowrap;
    word-break:keep-all;
    text-overflow: ellipsis;
    text-align: center;
    font-size: 16px;
    padding-right: 3%;
  }

  .icon-shengou{
    background: #f4707a;
    width: 32px;
    height: 12px;
    padding-left: 2px;
    padding-right: 2px;
    border-radius: 2px;
    color: #ffffff;
    text-align: center;
    display: inline;
    vertical-align: middle;
    font-size: 12px;
  }

    .icon-rengou{
    background: #fe9f51;
    width: 32px;
    height: 15px;
    padding-left: 2px;
    padding-right: 2px;
    border-radius: 2px;
    color: #ffffff;
    text-align: center;
    display: inline;
    vertical-align: middle;
    font-size: 12px;
  }

    .icon-shuhui{
    background: #a265cc;
    width: 32px;
    height: 15px;
    padding-left: 2px;
    padding-right: 2px;
    border-radius: 2px;
    color: #ffffff;
    text-align: center;
    display: inline;
    vertical-align: middle;
    font-size: 12px;
  }
</style>
